<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Show Geocoded Tweets</title>
    <style>
      div#mymap {
        width: 600px;
        height: 400px;
      }

     </style>



     <!-- JQUERY PLUGIN -->
     <script type="text/javascript" 
     <src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
     
     <!-- GOOGLE MAPS -->
      <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>


     <!-- GOOGLE AJAX API CALL -->
     <script type="text/javascript" src="http://www.google.com/jsapi">
     // mapstraction API Libraries to abstract mapping API implentation
     <script type="text/javascript" src="mxn.js?(google)"></script>
     <script type="text/javascript" src="mxn.google.geocoder.js"></script>

    <!-- LOCAL SCRIPT -->
     <script type="text/javascript">
		
		//load Google Maps API v3 via Google AJAX API loader      
       google.load("maps", 3, {other_params:"sensor=false"});

    	var mapstraction;
     	var radius_field, location_field, kw_field;
      	function create_map() {
        mapstraction = new mxn.Mapstraction('mymap', 'google');
        mapstraction.addControls({"zoom":"large"});

        // Store form field objects
        radius_field = document.getElementById('radius');
        location_field = document.getElementById('loc');
        kw_field = document.getElementById('keyword');

        // Get position from ClientLocation
        var pos = google.loader.ClientLocation;
        if (pos) {
          var posloc = new mxn.LatLonPoint(pos.latitude, pos.longitude);
          var cityname = pos.address.city + ", " + pos.address.region;
          get_twitter_geo(posloc, 5);
          mapstraction.setCenterAndZoom(posloc, 11);

          location_field.value = cityname;
        }
        else {
            mapstraction.setCenterAndZoom(new mxn.LatLonPoint(40, -92), 3);
            }
      }
    </script>

  </head>
  <body onload="create_map()">
    <div id="mymap"></div>
    <form onsubmit="geocode_form();return false;">
      <input type="text" id="keyword" name="keyword" size="25" /> within 
      <select name="radius" id="radius">
        <option value="1">1 mi</option>
        <option value="5" selected>5 mi</option>
        <option value="10">10 mi</option>
        <option value="25">25 mi</option>
      </select>
      of <input type="text" id="loc" name="loc" size="25" />
      <input type="submit" value="Go" />
    </form>
  </body>
  </html>